<template>
  <div id="main">
    <div class="mui--divider-bottom" id="header">
      <span class="mui--divider-right" >
        字体
        <span><img src="/css/glyphicons_free/glyphicons/png/glyphicons-602-chevron-down.png"
           style="height:8px;width:11px;"/></span>
      </span>
      <span class="mui--divider-right self-little-left">
        14
        <span><img src="/css/glyphicons_free/glyphicons/png/glyphicons-602-chevron-down.png"
          style="height:8px;width:11px;"/></span>
      </span>

        <span class="self-little-left"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-606-text-color.png"/></span>
        <span><img src="/css/glyphicons_free/glyphicons/png/glyphicons-103-bold.png"/></span>
        <span><img src="/css/glyphicons_free/glyphicons/png/glyphicons-102-italic.png" /></span>
        <span ><img src="/css/glyphicons_free/glyphicons/png/glyphicons-104-text-underline.png"/></span>
        <span class="mui--divider-right"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-105-text-strike.png" /></span>

        <span class="self-little-left"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-153-check.png" /></span>
        <span class="mui--divider-right"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-158-show-thumbnails-with-lines.png" /></span>

        <span class="self-little-left"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-51-link.png" /></span>
        <span class="mui--divider-right"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-63-paperclip.png"/></span>

        <span class="self-little-left"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-157-show-thumbnails.png"/></span>
        <span><img src="/css/glyphicons_free/glyphicons/png/glyphicons-111-align-left.png"/></span>
        <span ><img src="/css/glyphicons_free/glyphicons/png/glyphicons-112-align-center.png" /></span>
        <span class="mui--divider-right"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-113-align-right.png" /></span>

        <span class="self-little-left"><img src="/css/glyphicons_free/glyphicons/png/glyphicons-52-eye-open.png" /></span>
        <span><img src="/css/glyphicons_free/glyphicons/png/glyphicons-53-eye-close.png" /></span>
    </div>
    <form class="mui-form" id="message">
      <div class="mui-textfield " >
        <input type="text" placeholder="写下标题" class="self-no-border self-title">
      </div>
      <div class="mui-textfield">
        <textarea placeholder="拖放文件到这里，或者直接开始" class="self-no-border self-textarea" v-model="content.text"></textarea>
      </div>
      <div class="" v-html="html">

      </div>
      <button type="确定" class="mui-btn mui-btn--raised" style="background-color:#eeeeee;">确定</button>
      <button type="清空" class="mui-btn mui-btn--raised" >清空</button>
    </form>


  </div>

</template>


<script>
import marked from 'marked';
export default {
  data(){
    return {

    }
  },
  props:["content"],
  computed:{
    html(){
      return marked(this.content.text,{sanitize:true});
    }
  }
}
</script>

<style lang="css">
#main{
  padding:13px 34px ;
}
#header{
  padding-bottom: 13px ;
}
#header span{
  padding-right:12px;
}
#header span img{
  opacity: 0.5;
  height:10px;
  width: 12px;
}
#header .self-little-left{
  padding-left: 12px;
}

.self-no-border{
  border: none !important;
}
.self-title{
  font-size: 25px !important;
}
.self-textarea{
  height: 150px;
}
</style>
